<template>
	<view class="content">
		<view class="content-top">
			<view class="content-top-title">
				<view class="content-top-title-left">订单信息</view>
				<!-- 已接单 -->
				<view class="content-top-title-right" v-if='orderDetail.recycler_status_text == "已接单" ' style="color:#00CB8B">{{orderDetail.recycler_status_text}}</view>
				<!-- 结算中 -->
				<view class="content-top-title-right" v-if='orderDetail.recycler_status_text == "结算中" ' style="color:#FF8500">{{orderDetail.recycler_status_text}}</view>
				<!-- 已完成 -->
				<view class="content-top-title-right" v-if='orderDetail.recycler_status_text == "已完成" ' style="color:#333">{{orderDetail.recycler_status_text}}</view>
				
			</view>
			<view class="content-name-box">
				<view class="content-name-box-top">{{orderDetail.contact}} {{orderDetail.mobile}}</view>
				<view class="content-name-box-bottom">{{orderDetail.province}}{{orderDetail.city}}{{orderDetail.country}}{{orderDetail.address}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">订单编号</view>
				<view class="content-item-right">{{orderDetail.ordernum}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">预约时间</view>
				<view class="content-item-right">{{orderDetail.yuyue_date}} {{orderDetail.yuyue_start_time}}~{{orderDetail.yuyue_end_time}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">下单时间</view>
				<view class="content-item-right">{{orderDetail.ordertime_text}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">回收类别</view>
				<view class="content-item-right">{{orderDetail.items}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">预估佣金</view>
				<view class="content-item-right" style="color:red">{{orderDetail.yg_price ? orderDetail.yg_price : '-'}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">预估重量</view>
				<view class="content-item-right">{{orderDetail.weight}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">照片信息</view>
				<view class="content-item-right">
					<image @click="yulanImg(index)" class="tupian" v-for="(item,index) in orderDetail.images_url" :key='index' :src="item" mode="widthFix"></image>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">备注信息</view>
				<view class="content-item-right">{{orderDetail.remark}}</view>
			</view>
			<view class="content-item" v-if='orderDetail.recycler_status_text != "已接单"'>
				<view class="content-item-left">结算方式</view>
				<view class="content-item-right">{{orderDetail.sett_type == 1 ? '线上' : '线下'}}</view>
			</view>
			<view class="content-item" v-if='orderDetail.recycler_status_text != "已接单" && orderDetail.sett_type == 2'>
				<view class="content-item-left">线下付款凭证</view>
				<view class="content-item-right">
					<image @click="yulanpay()" class="pay-image-i" :src="orderDetail.pay_image" ></image>
				</view>
			</view>
			
			<view class="content-item" v-if='orderDetail.recycler_status_text == "已接单"'>
				<view class="content-item-left">结算方式</view>
				<radio-group class="content-item-right" @change="radioChange">
					<label><radio color="#00CB8B" value="1" checked="true"/>线上</label>
					<label style="margin-left: 20px;"><radio color="#00CB8B"  value="2" />线下</label>
				</radio-group>
			</view>
			<view class="content-item" v-if='pay_type == 2 && orderDetail.recycler_status_text == "已接单"'>
				<view class="content-item-left">线下付款凭证</view>
				<view class="content-item-right">
					<view class="add-shiwu-img-box">
						<view class="uploadImg-box" v-for="(item,index) in imageArray" :key="index">
							<image @click="deleteImgFun" :data-index='index' class="delete-img" :src="delete_img" mode=""></image>
							<image class="uploadImg" :src="item" mode=""></image>
						</view>
						<view class="add-shiwu-img" @click="uploadImgFun" v-if='imageArray.length == 0'>
							<view class="add-shu"></view>
							<view class="add-heng"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="news-big-box" style="margin-top: 12px;" v-if='orderDetail.recycler_status_text == "已接单"' v-for="(item,index) in recyclerjsonArray" :key='index'>
			<view class="news-content-item">
				<view class="news-content-item-left">回收类别</view>
				<picker mode="selector" class="right-select-box" :range="leibieList" range-key="title" @change="selectLeibie" :data-index="index">
					<view class="content-item-right"> {{item.recycler_items}} <image class="right-img" :src="rightImg" mode=""></image> </view>
				</picker>
			</view>
			<view class="news-content-item">
				<view class="news-content-item-left">回收重量</view>
				<view class="right-select-box">
					<input type="text" class="shuru-input" placeholder="请输入重量" v-model="item.recycler_weight">kg
				</view>
			</view>
			<view class="news-content-item">				<view class="news-content-item-left">回收单价</view>				<view class="right-select-box">					{{item.recycler_price}}元				</view>			</view>
			<view class="jianimg-btn" @click="jianShop" :data-index='index'> <image :src="jianImg" class="add-img" mode=""></image>删除该商品 </view>
		</view>
			
		<view class="addimg-btn" @click="addShop" v-if='orderDetail.recycler_status_text == "已接单"'> 
			<image :src="addImg" class="add-img" mode=""></image>新增商品 
		</view>
		<view style="width: 100%;margin-top: 150px;" v-if='orderDetail.recycler_status_text == "已接单"'></view>
		<view class="show-money-box" v-if='orderDetail.recycler_status_text == "已接单"'>
			<view class="show-money-box-left">订单总价 <text>￥{{money}}</text> </view>
			<view class="show-money-box-right" @click="tijiaoWancheng">完成订单</view>
		</view>
		
		<view class="content-top" style="margin-top: 12px;" v-if='orderDetail.recycler_status_text != "已接单"'>
			<view class="content-top-title">				<view class="content-top-title-left">回收信息</view>			</view>
			<view class="content-item" style="margin-top: 20px;">
				<view class="content-item-left">回收员</view>
				<view class="content-item-right">{{orderDetail.recycler_name}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">联系电话</view>
				<view class="content-item-right">{{orderDetail.recycler_mobile}}</view>
			</view>
			
			<view style="margin-top: 30px;" v-for="(item,index) in  orderDetail.recyclerInfo" :key='index'>
				<view class="content-item">
					<view class="content-item-left">回收类别</view>
					<view class="content-item-right">{{item.recycler_items}}</view>
				</view>
				<view class="content-item">
					<view class="content-item-left">回收重量</view>
					<view class="content-item-right">{{item.recycler_weight}}kg</view>
				</view>
				<view class="content-item">
					<view class="content-item-left">回收单价</view>
					<view class="content-item-right">{{item.recycler_price}}元</view>
				</view>
			</view>
			
			<view style="margin-top: 30px;">
				<view class="content-item">
					<view class="content-item-left" style="line-height: 20px;">回收总金额</view>
					<view class="content-item-right" style="font-size: 16px;">{{orderDetail.price}}元</view>
				</view>
				<view class="content-item">
					<view class="content-item-left" style="line-height: 20px;">佣金金额</view>
					<view class="content-item-right" style="color: red;font-size: 20px;">{{orderDetail.recycler_amount}}元</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				orderDetail:{},
				jianImg:baseUrl+'/uploads/static/image/recovery_ recycler_task_order_detail_jian_img@2x.png',
				addImg:baseUrl+'/uploads/static/image/recovery_ recycler_task_order_detail_add_img@2x.png',
				delete_img:baseUrl+'/uploads/static/image/recovery_address_manage_icon_delete@2x.png',
				rightImg:baseUrl+'/uploads/static/image/right-jiantou.png',
				imageArray:[],//上传图片
				leibieList:[
					// {
					// 	url:baseUrl+'/uploads/static/image/recovery_subscribe_iphone@2x.png',
					// 	name:'智能手机',
					// 	id:'0'
					// },
					// {
					// 	url:baseUrl+'/uploads/static/image/recovery_subscribe_clothes_icon@2x.png',
					// 	name:'四季衣服',
					// 	id:'1'
					// },
					// {
					// 	url:baseUrl+'/uploads/static/image/recovery_subscribe_pc_icon@2x.png',
					// 	name:'办公电脑',
					// 	id:'2'
					// },
				],
				leibeiWeight:[],//类别重量数组
				recyclerjsonArray:[
					{
						"recycler_items":"请选择类别",
						"recycler_price":"",
						"recycler_weight":""
					}
				],
				checkIndex:0,//选中的第几项
				id:'',//订单ID
				
				pay_type:1,
				pay_image:'',
				// money:'-',
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getTecycleFun()
			this.getOrderDetailFun(options.id)
		},
		computed:{
			money(){
				let moneyNum = 0
				this.recyclerjsonArray.forEach((item,index)=>{
					moneyNum += (Number(item.recycler_price)*Number(item.recycler_weight))
				})
				return moneyNum.toFixed(2)
			}
		},
		methods:{
			getTecycleFun(){
				//获取回收类别
				let _this = this
				http.getTecycleType().then((res)=>{
					if(res.data.code == 1){
						let data = res.data.data
						_this.leibieList = data
					}
				})	
			},
			selectLeibie(e){
				let value = e.detail.value 
				let index = e.currentTarget.dataset.index
				this.recyclerjsonArray[index].recycler_items = this.leibieList[value].title
				this.recyclerjsonArray[index].recycler_price = this.leibieList[value].price
			},
			getOrderDetailFun(id){
				let _this = this
				uni.showLoading()
				http.getUserOrderDetail({id:id}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 1){
						_this.orderDetail = res.data.data
					}
				})
			},
			yulanImg(index){
				let _this = this
				uni.previewImage({
					urls: _this.orderDetail.images_url,
					current:index
				})
			},
			yulanpay(){
				let _this = this
				let imgUrl = []
				imgUrl.push(_this.orderDetail.pay_image)
				uni.previewImage({
					urls: imgUrl,
				})
			},
			addShop(){
				this.recyclerjsonArray.push({
					"recycler_items":"请选择类别",
					"recycler_price":"",
					"recycler_weight":""
				})
			},
			jianShop(e){
				let index = e.currentTarget.dataset.index 
				let _this = this
				uni.showModal({
					title:'提示',
					content: '是否确定删除该商品？',
					success: function (res) {
						if (res.confirm) {
							_this.recyclerjsonArray.splice(index,1)
						}
					}
				})
			},
			radioChange(e){
				this.pay_type = e.detail.value
			},
			deleteImgFun(e){
				let delect_index = e.currentTarget.dataset.index 
				this.imageArray.splice(delect_index,1)
			},
			uploadImgFun(){
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function (res) {
						console.log(res);
						let access_token = uni.getStorageSync('X-Auth-Token')
						uni.uploadFile({
							fileType:"image",
							url: baseUrl+'/api/common/upload', //上传头像接口
							filePath: res.tempFilePaths[0],
							header:{
								'X-Auth-Token':access_token,
								"Content-Type": "multipart/form-data",
							},
							formData:{
								file:'file'//页面需要上传的字段
							},
							name: 'file',
							success: (uploadFileRes) => {
								var avatarRes = JSON.parse(uploadFileRes.data)
								if(avatarRes.code == 1){
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
									_this.imageArray.push(avatarRes.data.fullurl)
								}else{
									uni.showToast({
										title:'上传失败',
										icon:'error'
									})
								}
							   
							}
						});
					}
				});
			},
			tijiaoWancheng(){
				console.log(this.money)
				let _this = this
				for(let i = 0;i<_this.recyclerjsonArray.length;i++){
					if(_this.recyclerjsonArray[i].recycler_items == '请选择类别' || _this.recyclerjsonArray[i].recycler_price == '' || _this.recyclerjsonArray[i].recycler_weight == ''){
						uni.showToast({
							title:'请填写商品信息',
							icon:'none'
						})
						return false
					}
				}
				if(_this.pay_type == 2){
					if(_this.imageArray.length == 0){
						uni.showToast({
							title:'请上传线下付款凭证',
							icon:'none'
						})
						return false
					}else{
						_this.pay_image = _this.imageArray[0]
					}
				}
				
				uni.showModal({
					title:'提示',
					content: '是否完成订单？',
					success: function (res) {
						if (res.confirm) {
							http.getComOrder({
								id:_this.id,
								sett_type:_this.pay_type,
								pay_image:_this.pay_image,
								recyclerjson:JSON.stringify(_this.recyclerjsonArray)
							}).then((res)=>{
								if(res.data.code == 1){
									uni.navigateTo({
										url:'/pages/recoveryCenter/orderList?type=2'
									})
								}
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style>
	.content{width: 100%;min-height: 100vh;background-color: #F8F9FD;box-sizing: border-box;padding: 12px;font-family: 'PingFang Bold';}
	.content-top{width: 100%;background: #fff;border-radius: 10px;box-sizing: border-box;padding: 15px;}
	.content-top-title{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.content-top-title-left{border-left: 2px solid #00CB8B;box-sizing: border-box;padding-left: 5px;font-size: 14px;line-height: 17px;}
	.content-top-title-right{font-size: 16px;}
	.content-name-box{width: 100%;margin-top: 20px;margin-bottom: 30px;}
	.content-name-box-top{font-size: 14px;color: #333;}
	.content-name-box-bottom{font-size: 12px;color: #999;margin-top: 5px;}
	.content-item{width: 100%;display: flex;flex-direction: row;margin-bottom: 15px;}
	.content-item:last-child{margin-bottom: 0px;}
	.content-item-left{font-size: 14px;color: #999;margin-right: 24px;width: 75px;text-align: justify;text-align-last: justify;}
	.content-item-right{font-size: 14px;color: #333;display: flex;flex-direction: row;align-items: center;}
	.tupian{width: 50px;margin-right: 10px;height: 50px;border-radius: 5px;}
	
	.news-big-box{width: 100%;background: #fff;border-radius: 10px;box-sizing: border-box;padding: 15px;}
	.news-content-item{width: 100%;display: flex;flex-direction: row;height: 60px;align-items: center;border-bottom: 1px solid #f6f6f6;}
	.news-content-item:last-child{border-bottom: 0px;}
	.news-content-item-left{font-size: 14px;color: #999;margin-right: 24px;width: 75px;text-align: justify;text-align-last: justify;}
	.right-img{width: 14px;height: 14px;margin-left: 10px;}
	.right-select-box{width: calc(100% - 100px);display: flex;flex-direction: row;align-items: center;justify-content: flex-end;font-size: 14px;}
	.shuru-input{text-align: right;margin-right: 5px;}
	.addimg-btn{width: calc(100% - 30px);margin: 0 auto; height: 43px;border: 1px solid #00CB8B;color: #00CB8B;border-radius: 5px;margin-top: 20px;display: flex;flex-direction: row;align-items: center;justify-content: center;}
	.add-img{width: 15px;height: 15px;margin-right: 10px;}
	.jianimg-btn{width: calc(100% - 2px);margin: 0 auto; height: 43px;border: 1px solid #00CB8B;color: #00CB8B;border-radius: 5px;margin-top: 20px;display: flex;flex-direction: row;align-items: center;justify-content: center;}
	.show-money-box{position: fixed;bottom: 0;left: 0;z-index: 10;width: 100%;height: calc(70px + env(safe-area-inset-bottom) /2);background-color: #fff;box-sizing: border-box;padding: 13px 17px;display: flex;flex-direction: row;justify-content: space-between;}
	.show-money-box-left{display: flex;flex-direction: row;align-items: center;height: 40px;}
	.show-money-box-left text{color: #FF2020;}
	.show-money-box-right{width: 110px;height: 40px;color: #fff;background: #00CB8B;text-align: center;line-height: 40px;}
	
	.add-shiwu-img-box{width: 100%;overflow: hidden;margin-top: 10px;display: flex;flex-direction: row;}
	.add-shiwu-img{width: 99px;height: 99px;border: 1px solid #e5e5e5;background: #f6f6f6;position: relative;border-radius: 10px;margin-right: 10px;}
	.add-shu{position: absolute;width: 3px;height: 35px;border-radius: 3px;background: #d8d8d8;top: 35.25px;left: 47px;}
	.add-heng{position: absolute;width: 35px;height: 3px;border-radius: 3px;background: #d8d8d8;top: 52px;left: 33.25px;}
	.uploadImg-box{width: 100px;height: 100px;position: relative;border: 1px solid #d8d8d8;margin-right: 10px;}
	.uploadImg{width: 100%;height: 100%;}
	.delete-img{width: 20px;height: 20px;position: absolute;right: 0;top: 0;z-index: 10;background: rgba(0,0,0,0.8);}
	.pay-image-i{width: 100px;height: 100px;}
</style>